<template>
  <div class="login">
    <div class="top">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
    </div>
    <div class="top1">
      <img src="../assets/login-top.png" alt="" />
    </div>

    <!-- 密码登录 -->
    <div class="from" v-if="loginObj.flag_qiehuan == 0">
      <div style="display: flex">
        <img src="../assets/login-手机.png" alt="" />
        <input type="text" placeholder="请输入手机号" />
        <!-- <button class="yzm">获取验证码</button> -->
      </div>
      <div>
        <img src="../assets/login-密码.png" alt="" />
        <input type="text" placeholder="请输入密码" />
      </div>
      <div style="display: flex">
        <img src="../assets/login-密码.png" alt="" />
        <input type="text" placeholder="请输入验证码" />
        <img :src="loginObj.imgcode" alt="" @click="getimgcode" class="tpyzm" />
      </div>
      <button class="btn">登录</button>
      <div class="password">
        <span class="password_a">忘记密码</span>
        <span class="password_b" @click="loginObj.flag_qiehuan = 1"
          >注册/验证码登录</span
        >
      </div>
    </div>
    <!-- 验证码登录 -->
    <div class="from" v-if="loginObj.flag_qiehuan == 1">
      <div style="display: flex">
        <img src="../assets/login-手机.png" alt="" />
        <!-- 手机号 -->
        <input
          type="text"
          placeholder="请输入手机号"
          @blur="validInput(1)"
          v-model="loginObj.mobile"
        />
        <van-button class="yzm" @click="getmobeilApi" :disabled="valiss">
          {{ val }}
        </van-button>
      </div>
      <div>
        <img src="../assets/login-密码.png" alt="" />
        <!-- 手机验证码 -->
        <input
          type="text"
          placeholder="请输入手机验证码"
          v-model="loginObj.sms_code"
          @blur="validInput(2)"
        />
      </div>
      <div style="display: flex">
        <img src="../assets/login-密码.png" alt="" />
        <!-- 图片验证码 -->
        <input
          type="text"
          placeholder="请输入图片验证码"
          v-model="loginObj.captcha"
          @blur="validInput(3)"
        />
        <img :src="loginObj.imgcode" alt="" @click="getimgcode" class="tpyzm" />
      </div>
      <button class="btn" @click="loginOK">登录</button>
      <div class="password">
        <span class="password_a">未注册的手机号将自动注册</span>
        <span class="password_a" @click="loginObj.flag_qiehuan = 0"
          >密码登录</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { imgcodeApi, loginApi, mobeilApi } from "../api/homeApi";
import { useRouter } from "vue-router";
const router = useRouter();
// 图片验证码
const imgcode = ref("");
const flag = reactive({
  f1: true,
  f2: true,
  f3: true,
});
const val = ref("获取验证码");
const valiss = ref(false);

// 登录说需要的数据
const loginObj = reactive({
  mobile: "18838178921", //手机号
  sms_code: "", //  手机验证码
  captcha: "",
  // 用户初始密码
  user_pass: "000000",
  // 设备号
  device_type: "2",
  flag_qiehuan: 0,
});

onMounted(() => {
  getimgcode();
});
// 获取手机号验证码
const getmobeilApi = async () => {
  const num = ref(60);
  let time = setInterval(() => {
    val.value = "获取验证码" + "(" + num.value + ")";
    valiss.value = true;
    num.value--;
    if (num.value < 0) {
      valiss.value = false;
      val.value = "获取验证码";
      clearInterval(time);
    }
  }, 1000);

  const res = await mobeilApi({
    mobile: loginObj.mobile,
    sms_type: "login",
  });
  console.log("发验证码了", res);
};
// 获取图片验证码
const getimgcode = async () => {
  const res = await imgcodeApi();
  console.log("图片验证码", res);
  loginObj.imgcode = res.data.data.url.img;
};
// 判空
const validInput = async (type) => {
  // console.log(type);
  type = type * 1;
  switch (type) {
    case 1:
      const reg = /1[36789]\d{9}/g;
      if (loginObj.mobile.trim().length === 0 || !reg.test(loginObj.mobile)) {
        console.log("手机号格式不符合");
        flag.f1 = false;
        return false;
      }
      flag.f1 = true;

      break;
    case 2:
      if (
        loginObj.sms_code.trim().length === 0 ||
        loginObj.sms_code.length !== 6
      ) {
        // console.log("手机号验证码不符合");
        flag.f2 = false;

        return false;
      }
      flag.f2 = true;

      break;
    case 3:
      if (
        loginObj.captcha.trim().length === 0 ||
        loginObj.captcha.length !== 4
      ) {
        console.log("图片验证码不符合");
        flag.f3 = false;

        return false;
      }
      flag.f3 = true;

      break;
  }
};
// 登录
const loginOK = async () => {
  console.log("loginObj", loginObj);

  const { mobile, sms_code, captcha, user_pass, device_type } =
    toRefs(loginObj);
  let _data = {
    mobile: mobile.value,
    sms_code: sms_code.value,
    captcha: captcha.value,
    user_pass: user_pass.value,
    device_type: device_type.value,
  };
  // 调接口
  if (flag.f1 && flag.f2 && flag.f3) {
    console.log("好了");
    // 验证成功了可以掉用接口
    const res = await loginApi(_data);
    if (res.data.code === 200) {
      const { user_name, user_nickname, remember_token: token } = res.data.data;
      localStorage.setItem("moblie", res.data.data.mobile);
      localStorage.setItem("token", token);
      router.push("/my");
    }

    console.log(res);
  }
};
</script>
<style lang="scss" scoped>
.login {
  padding: 20px;
  height: 100%;
}
.top1 {
  width: 50%;
  margin: 100px auto;

  img {
    width: 400px;
    height: 120px;
  }
}
.from {
  padding: 20px;
  div {
    margin-bottom: 40px;
    img {
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }
    input {
      margin-left: 20px;
      border: 0;
      font-size: 12px;
      padding-left: 20px;
      border-bottom: 1px solid #eee;
      width: 80%;
      padding-bottom: 20px;
    }
  }
  .tpyzm {
    width: 150px;
    height: 50px;
  }
  .yzm {
    background-color: #f15a24;
    color: #fff;
    font-size: 12px;
    // border-radius: 10px;
    border: 0;
    height: 50px;
    line-height: 50px;
    width: 300px;
  }
  .btn {
    width: 99%;
    height: 80px;
    line-height: 80px;
    margin: 20px auto;
    //   text-align: center;
    background-color: #f15a24;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    border: 0;
  }
  .password {
    display: flex;
    justify-content: space-between;
    margin: 20px;
    font-size: 12px;
  }
  .password_a {
    color: #999;
  }
  .password_b {
    color: #f15a24;
  }
}
</style> 